事件 (Event)

網頁的事件可說是無所不在，從瀏覽器載入網頁開始，只要有在使用網頁，就隨時都有事件正在被觸發。

事件類型

事件類型非常多種，比較常見的例如：滑鼠移動、滑動捲軸、按下按鈕等等，每個都是獨立事件，因為事件實在太多，可以到 W3C 這邊有列出詳細的事件可以查詢。

事件觸發

雖然有非常多種事件 (Event)，但在被觸發前它們並不會有任何反應。在瀏覽器讀取網頁後，各種事件就像在背景排隊一樣等著，當我們做了某個動作觸發了某個事件(例如點擊滑鼠右鍵)，才會根據觸發的事件去做對應程式的執行。

舉例來說：

大部分人家裡都有電鈴，在被人按電鈴前，那個電鈴不會自己響、也不會有人主動去開門 (出門回家先不算在此範疇)。

當電鈴被按了 (觸發按電鈴事件) → 聽到鈴聲去開門 (對應的程式碼執行做對應的事)

以網頁 Hover 事件為例：

當我們把滑鼠移到魯夫圖片上面，魯夫的手就會伸長，這是一個偽元素跟絕對定位的應用。而「滑鼠移到圖片上面」這件事就被稱做「事件」，而讓魯夫的手伸長的相關程式碼就被稱為「事件處理者」(Event Handler)。

註冊事件監聽 (addEventListener)

當我們想要讓某個事件被觸發時可以執行我們想要的動作，例如按了按鈕後可以告訴我該按鈕被點擊了，這時可以使用 addEventListener 來註冊事件監聽：

const btn = document.querySelector(".btn");

// 註冊一個監聽事件，監聽"點擊"事件，該按鈕如果被偵測到被點擊了，就會執行後面的函式內容
btn.addEventListener("click", function(e){
    console.log("按鈕被點擊了");
})

後面的函式便可以讓我們去調整想要在偵測到該監聽事件後執行的動作，例如也可以在該按鈕被點擊後去改動 h1 的文字內容：

const btn = document.querySelector(".btn");
const title = document.querySelector("h1");

// 如果偵測到按鈕被點擊，就執行函式變更 h1 的文字內容
btn.addEventListener("click", function(e){
    title.textContent = "今天天氣真不錯";
})

如何觀看 DOM 有註冊事件監聽

當我們想要去察看某個按鈕是否有被綁定事件監聽，可以怎麼看呢？這裡我們用 Chrome 瀏覽器的開發人員工具來協助查看：

首先對想查看的按鈕按右鍵 → 檢查

接著選取右邊選項 Event Listeners

這邊就可以看到這個按鈕被綁定了哪些監聽行為，如果明明註冊了監聽行為，卻怎麼樣也運作不順利時，這是一個很好的除錯方式。

參考資料

線上課程
重新認識 JavaScript: Day 14 事件機制的原理